<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>通讯录信息添加</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="" name="author" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="../assets/images/favicon.ico" th:href="@{/assets/images/favicon.ico}">

    <!-- App css -->
    <link href="../assets/css/bootstrap.min.css" th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <link href="../assets/css/jquery-ui.min.css" th:href="@{/assets/css/jquery-ui.min.css}" rel="stylesheet">
    <link href="../assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/metisMenu.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/app.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div th:replace="~{common/top-nav::top-nav}"></div>
<!-- Top Bar End -->


<!-- Left Sidenav -->
<div th:replace="~{common/left-side-nav::left-side-nav}"></div>
<!-- end left-sidenav-->

<div class="page-wrapper">
    <!-- Page Content-->
    <div class="page-content">

        <div class="container-fluid">
            <!-- Page-Title -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <div class="float-right">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">办公自动化</a></li>
                                <li class="breadcrumb-item"><a href="javascript:void(0);">用户通讯录</a></li>
                                <li class="breadcrumb-item active">通讯信息管理</li>
                            </ol>
                        </div>
                        <h4 class="page-title">用户通讯信息</h4>
                    </div><!--end page-title-box-->
                </div><!--end col-->
            </div>
            <!-- end page title end breadcrumb -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 header-title">添加新联系人</h4>
                            <form action="/contact/contact_add" method="post"
                                  class="needs-validation" novalidate>
                                <!--novalidate 不让浏览器进行自动验证-->
                                <div class="form-group row">
                                    <label for="userId"
                                           class="col-sm-2 col-form-label text-right">姓名</label>
                                    <div class="col-sm-8">
                                        <!--required 提交表单时进行验证-->
                                        <select name="userId" id="userId" class="form-control">
                                            <option SELECTED>请选择用户...</option>
                                            <option th:each="user : ${users}"
                                                    th:selected="${contact != null ? contact.userId == user.id : false}"
                                                    th:value="${user.id}"
                                                    th:text="${user.name}"></option>
                                        </select>
                                        <div class="invalid-feedback">姓名不能为空</div>
                                        <div class="text-danger mt-2"></div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="name"
                                           class="col-sm-2 col-form-label text-right">备注</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" required maxlength="50"
                                          th:value="${contact != null ? contact.name : ''}"
                                          value="" name="name"
                                          id="name">
                                        <div class="invalid-feedback">未选择！</div>
                                        <div class="text-danger mt-2"></div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="sex"
                                           class="col-sm-2 col-form-label text-right">性别</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" required name="sex" id="sex">
                                            <option SELECTED>请选择性别...</option>
                                            <option th:selected="${contact != null ? true : false}"
                                                    th:value="'男'"
                                                    th:text="'男'"></option>
                                            <option th:selected="${contact != null ? true : false}"
                                                    th:value="'女'"
                                                    th:text="'女'"></option>
                                        </select>
                                        <div class="invalid-feedback">未选择！</div>
                                        <div class="text-danger mt-2"></div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="mobile"
                                           class="col-sm-2 col-form-label text-right">手机号码</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" value="" required maxlength="100"
                                               name="mobile" id="mobile" th:value="${contact != null ? contact.mobile : ''}">
                                        <div class="invalid-feedback">手机号码不能为空，并且不能超过100个字</div>
                                        <div class="text-danger mt-2"></div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="email"
                                           class="col-sm-2 col-form-label text-right">email</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="email" value="" required maxlength="50"
                                               name="email" id="email" th:value="${contact != null ? contact.email : ''}">
                                        <div class="invalid-feedback">email不能为空，并且不能超过100个字</div>
                                        <div class="text-danger mt-2"></div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="qq"
                                           class="col-sm-2 col-form-label text-right">QQ</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" value="" required maxlength="50"
                                               name="qq" id="qq" th:value="${contact != null ? contact.qq : ''}">
                                        <div class="invalid-feedback">QQ不能超过100个字</div>
                                        <div class="text-danger mt-2"></div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="weixin"
                                           class="col-sm-2 col-form-label text-right">微信</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" value="" required maxlength="50"
                                               name="weixin" id="weixin" th:value="${contact != null ? contact.weixin : ''}">
                                        <div class="invalid-feedback">微信不能超过500个字</div>
                                        <div class="text-danger mt-2"></div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="address"
                                           class="col-sm-2 col-form-label text-right">地址</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" value="" required maxlength="50"
                                               name="address" id="address" th:value="${contact != null ? contact.address : ''}">
                                        <div class="invalid-feedback">地址不能超过500个字</div>
                                        <div class="text-danger mt-2"></div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="company"
                                           class="col-sm-2 col-form-label text-right">公司名</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" value="" required maxlength="50"
                                               name="company" id="company" th:value="${contact != null ? contact.company : ''}">
                                        <div class="invalid-feedback">公司名不能超过50个字</div>
                                        <div class="text-danger mt-2"></div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="postCode"
                                           class="col-sm-2 col-form-label text-right">邮政编码</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text" value="" required maxlength="50"
                                               name="postCode" id="postCode" th:value="${contact != null ? contact.postCode : ''}">
                                        <div class="invalid-feedback">不能超过50个字</div>
                                        <div class="text-danger mt-2"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-10 ml-auto">
                                        <button type="submit"
                                                class="btn btn-gradient-primary">保存</button>
                                        <button type="reset"
                                                class="btn btn-gradient-danger">重置</button>
                                    </div>
                                </div>
                            </form>

                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!-- end col -->
            </div>
             <!-- end row -->


        </div><!-- container -->

        <footer class="footer text-center text-sm-left">
            &copy; 2022办公自动化 <span class="text-muted d-none d-sm-inline-block float-right"><i class="mdi mdi-heart text-danger"></i> 来自 <a href="#">4228</a></span>
        </footer><!--end footer-->
    </div>
    <!-- end page content -->
</div>
<!-- end page-wrapper -->




<!-- jQuery  -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/jquery-ui.min.js"></script>
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/metismenu.min.js"></script>
<script src="../assets/js/waves.js"></script>
<script src="../assets/js/feather.min.js"></script>
<script src="../assets/js/jquery.slimscroll.min.js"></script>

<script src="../../plugins/tiny-editable/mindmup-editabletable.js"></script>
<script src="../../plugins/tiny-editable/numeric-input-example.js"></script>
<script src="../../plugins/bootable/bootstable.js"></script>
<script src="../assets/pages/jquery.tabledit.init.js"></script>

<!-- App js -->
<script src="../assets/js/app.js"></script>
</body>
</html>